<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <!-- Title and other stuffs -->
  <title>穿云空气质量检测系统</title> 
  <meta name="keywords" content="Bootstrap模版,Bootstrap模版下载,Bootstrap教程,Bootstrap中文,后台管理系统模版,后台模版下载,后台管理系统,后台管理模版" />
  <meta name="description" content="JS代码网提供Bootstrap模版,后台管理系统模版,后台管理界面,Bootstrap教程,Bootstrap中文翻译等相关Bootstrap插件下载" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="">
  <!-- Stylesheets -->
  <link href="style/bootstrap.css" rel="stylesheet">
  <!-- Font awesome icon -->
  <link rel="stylesheet" href="style/font-awesome.css"> 
  <!-- jQuery UI -->
  <link rel="stylesheet" href="style/jquery-ui.css"> 
  <!-- Calendar -->
  <link rel="stylesheet" href="style/fullcalendar.css">
  <!-- prettyPhoto -->
  <link rel="stylesheet" href="style/prettyPhoto.css">  
  <!-- Star rating -->
  <link rel="stylesheet" href="style/rateit.css">
  <!-- Date picker -->
  <link rel="stylesheet" href="style/bootstrap-datetimepicker.min.css">
  <!-- CLEditor -->
  <link rel="stylesheet" href="style/jquery.cleditor.css"> 
  <!-- Uniform -->
  <link rel="stylesheet" href="style/uniform.default.css"> 
  <!-- Bootstrap toggle -->
  <link rel="stylesheet" href="style/bootstrap-switch.css">
  <!-- Main stylesheet -->
  <link href="style/style.css" rel="stylesheet">
  <!-- Widgets stylesheet -->
  <link href="style/widgets.css" rel="stylesheet">   
  
  <!-- HTML5 Support for IE -->
  <!--[if lt IE 9]>
  <script src="js/html5shim.js"></script>
  <![endif]-->

  <!-- Favicon -->
  <link rel="shortcut icon" href="img/favicon/favicon.png">
</head>

<body>
<!-- Header starts -->
  <header>
    <div class="container">
      <div class="row">

        <!-- Logo section -->
        <div class="col-md-4">
          <!-- Logo. -->
           <div class="logo">
            <h1><a href="#">AirPal<span class="bold"></span></a></h1>
            <p class="meta">污染检测系统</p>
          </div>
          <!-- Logo ends -->
        </div>

        <!-- Data section -->

        <div class="col-md-4" style="left: 40%">
          <div class="header-data">

            <!-- Traffic data -->
            <div class="hdata">
              <div class="mcol-left">
                <!-- Icon with red background -->
                <i class="icon-signal bred"></i> 
              </div>
              <div class="mcol-right">
                <!-- Number of visitors -->
                <p><a href="#">7</a> <em>监测点</em></p>
              </div>
              <div class="clearfix"></div>
            </div>

            <!-- Members data -->
            <div class="hdata">
              <div class="mcol-left">
                <!-- Icon with blue background -->
                <i class="icon-user bblue"></i> 
              </div>
              <div class="mcol-right">
                <!-- Number of visitors -->
                <p><a href="#">3000</a> <em>保护</em></p>
              </div>
              <div class="clearfix"></div>
            </div>

            <!-- revenue data -->
            <div class="hdata">
              <div class="mcol-left">
                <!-- Icon with green background -->
                <i class="icon-money bgreen"></i> 
              </div>
              <div class="mcol-right">
                <!-- Number of visitors -->
                <p><a href="#">绿色地球</a></p>
              </div>
              <div class="clearfix"></div>
            </div>                        

          </div>
        </div>

      </div>
    </div>
  </header>

<!-- Header ends -->

<!-- Main content starts -->

<div class="content">

    <!-- Sidebar -->
    <div class="sidebar">
        <div class="sidebar-dropdown"><a href="#">Navigation</a></div>

        <!--- Sidebar navigation -->
        <!-- If the main navigation has sub navigation, then add the class "has_sub" to "li" of main navigation. -->
        <ul id="nav">
          <!-- Main menu with font awesome icon -->
          <li><a href="index.html"><i class="icon-home"></i> 监测地图</a>
            <!-- Sub menu markup 
            <ul>
              <li><a href="#">Submenu #1</a></li>
              <li><a href="#">Submenu #2</a></li>
              <li><a href="#">Submenu #3</a></li>
            </ul>-->
          </li>
                                 
          <li><a href="charts.html" class="open"><i class="icon-bar-chart"></i> 参数图表</a></li> 
         
        </ul>
    </div>

    <!-- Sidebar ends -->

    <!-- Main bar -->
    <div class="mainbar">

      <!-- Page heading -->
      <div class="page-head">
        <h2 class="pull-left"><i class="icon-bar-chart"></i> Charts</h2>

            
         
        <!-- Breadcrumb -->
        
        <div class="bread-crumb pull-right">
          <a href="index.html"><i class="icon-home"></i> Home</a> 
          <!-- Divider -->
          <span class="divider">/</span> 
          <a href="#" class="bread-current">Chart</a>
        </div>

        <div class="clearfix"></div>

      </div>
      <!-- Page heading ends -->

      <!-- Matter -->

      <div class="matter">
        <div class="container">

          <div class="row">
            <div class="col-md-6">
                <div class="widget">

                <div class="widget-head">
                  <div class="pull-left">空气质量系数</div>
                  <div class="widget-icons pull-right">
                    <a href="#" class="wminimize"><i class="icon-chevron-up"></i></a> 
                    <a href="#" class="wclose"><i class="icon-remove"></i></a>
                  </div>  
                  <div class="clearfix"></div>
                </div>             


                <div class="widget-content">
                  <div class="padd">
              <!-- Curve chart1 starts -->
            <div id="maint" style="width: 575px;height:300px;position: relative;"></div>   <!--  服务器温度变化   -->
 </div>
                </div>
              </div>


                <!-- Curve chart1 ends -->
                 <!-- Curve chart2 starts -->

              <div class="widget">

                <div class="widget-head">
                  <div class="pull-left">各项参数</div>
                  <div class="widget-icons pull-right">
                    <a href="#" class="wminimize"><i class="icon-chevron-up"></i></a> 
                    <a href="#" class="wclose"><i class="icon-remove"></i></a>
                  </div>  
                  <div class="clearfix"></div>
                </div>             


                <div class="widget-content">
                  <div class="padd">
              <!-- Curve chart1 starts -->
            <div id="main1" style="width: 575px;height:300px;position: relative;"></div>   <!--  服务器温度变化   -->
 </div>
                </div>
              </div>
                <!-- Curve chart2 ends -->
              </div>


              <div class="col-md-6">
                <!-- Realtime chart1 starts -->

                <div class="widget">

                <div class="widget-head">
                  <div class="pull-left">空气质量系数</div>
                  <div class="widget-icons pull-right">
                    <a href="#" class="wminimize"><i class="icon-chevron-up"></i></a> 
                    <a href="#" class="wclose"><i class="icon-remove"></i></a>
                  </div>  
                  <div class="clearfix"></div>
                </div>             

                  <div class="widget-content">
                    <div class="padd">

                      <div id="live-chart"></div>
                      <hr />
                      Time Inverval: <input id="updateInterval" type="text" class="span3" value="">

                    </div>
                  </div>
                </div>

                <!-- Realtime chart1 ends -->
                

                 <!-- Realtime chart2 starts -->

                <div class="widget">

                <div class="widget-head">
                  <div class="pull-left">各项参数</div>
                  <div class="widget-icons pull-right">
                    <a href="#" class="wminimize"><i class="icon-chevron-up"></i></a> 
                    <a href="#" class="wclose"><i class="icon-remove"></i></a>
                  </div>  
                  <div class="clearfix"></div>
                </div>             

                  <div class="widget-content">
                    <div class="padd">

                      <div id="live-chart-2"></div>
                      <hr />
                      Time Inverval: <input id="updateInterval-2" type="text" class="span3" value="">

                    </div>
                  </div>
                </div>

                <!-- Realtime chart2 ends -->
                
            </div>
          </div>

        </div>
      </div>

    <!-- Matter ends -->

    </div>

   <!-- Mainbar ends -->        
   <div class="clearfix"></div>

</div>
<!-- Content ends -->

<!-- Footer starts -->
<footer>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
            <!-- Copyright info -->
            <p class="copy">Copyright &copy; 2012 | <a href="#">Your Site</a> </p>
      </div>
    </div>
  </div>
</footer>   

<!-- Footer ends -->

<!-- Scroll to top -->
<span class="totop"><a href="#"><i class="icon-chevron-up"></i></a></span> 

<!-- JS -->
<script src="js/jquery.js"></script> <!-- jQuery -->
<script src="js/bootstrap.js"></script> <!-- Bootstrap -->
<script src="js/jquery-ui-1.9.2.custom.min.js"></script> <!-- jQuery UI -->
<script src="js/fullcalendar.min.js"></script> <!-- Full Google Calendar - Calendar -->
<script src="js/jquery.rateit.min.js"></script> <!-- RateIt - Star rating -->
<script src="js/jquery.prettyPhoto.js"></script> <!-- prettyPhoto -->

<!-- jQuery Flot -->
<script src="js/excanvas.min.js"></script>
<script src="js/jquery.flot.js"></script>
<script src="js/jquery.flot.resize.js"></script>
<script src="js/jquery.flot.pie.js"></script>
<script src="js/jquery.flot.stack.js"></script>

<!-- jQuery Notification - Noty -->
<script src="js/jquery.noty.js"></script> <!-- jQuery Notify -->
<script src="js/themes/default.js"></script> <!-- jQuery Notify -->
<script src="js/layouts/bottom.js"></script> <!-- jQuery Notify -->
<script src="js/layouts/topRight.js"></script> <!-- jQuery Notify -->
<script src="js/layouts/top.js"></script> <!-- jQuery Notify -->
<!-- jQuery Notification ends -->

<script src="js/sparklines.js"></script> <!-- Sparklines -->
<script src="js/jquery.cleditor.min.js"></script> <!-- CLEditor -->
<script src="js/bootstrap-datetimepicker.min.js"></script> <!-- Date picker -->
<script src="js/jquery.uniform.min.js"></script> <!-- jQuery Uniform -->
<script src="js/bootstrap-switch.min.js"></script> <!-- Bootstrap Toggle -->
<script src="js/filter.js"></script> <!-- Filter for support page -->
<script src="js/custom.js"></script> <!-- Custom codes -->
<script src="js/charts.js"></script> <!-- Charts & Graphs -->
<script src="js/echarts.js"></script>
<script src="js/data.js"></script>
<!-- Scripts for this page -->

<script type="text/javascript">    
            var b,sel_i;
            var data=new data();
            var res=new returndata();
             
                $.ajax({
                type:"post",
                async:false,
                url:"php/conn.php",
                data:{},
                scriptCharset: 'utf-8',
                dataType:"json",
                success:function(res){
                    b=res[0];
                    for (var i=0;i<b;i++)
                    {
                        data.id[i]=res[i+1];
                        data.lat[i]=res[i+b+1];
                        data.lng[i]=res[i+2*b+1];
                        data.co[i]=res[i+3*b+1];
                        data.qua[i]=res[i+4*b+1];
                        data.o3[i]=res[i+5*b+1];
                        data.dust[i]=res[i+6*b+1];
                        data.state[i]=res[i+7*b+1];
                        data.time[i]=res[i+8*b+1];
                    }
                },
                error : function(errorMsg) {
                    //请求失败时执行该函数
                   // alert("图表请求数据失败!");
                  }
            });
              
 </script>

<script type="text/javascript">
 var myChart6 = echarts.init(document.getElementById('maint'));

 option6 = {
    title: {
    },
    tooltip: {
        trigger: 'axis'
    },
    xAxis:  {
        type: 'category',
        boundaryGap: false,
        data: ['七小时前','六小时前','五小时前','四小时前','三小时前','二小时前','一小时前']
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value}'
        }
    },
    series: [
        {
            name:'qua',
            type:'line',
            data:data.qua,
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        }
    ]
};
  myChart6.setOption(option6);
  
  var chart_qua,chart_co,chart_o3,chart_dust;
  var chart_time1=[];
  var chart_qua_array=[],chart_co_array=[],chart_o3_array=[],chart_dust_array=[];
  var jsq=0;
  
  function chart_ajax(){
  $.ajax({
                type:"post",
                async:false,
                url:"php/update.php",
                data:{},
                scriptCharset: 'utf-8',
                dataType:"json",
                success:function(res){
                    chart_qua=res[5];
                    chart_co=res[4];
                    chart_o3=res[6];
                    chart_dust=res[7];
                    chart_time=res[9];
                },
                error : function(errorMsg) {
                    //请求失败时执行该函数
                    console.log("图表请求数据失败!");}
            });
            jsq++;
            if (jsq>=8){
            chart_qua_array.shift();
            chart_co_array.shift();
            chart_o3_array.shift();
            chart_dust_array.shift();
          }
          chart_qua_array.push(chart_qua);
          chart_co_array.push(chart_co);
          chart_o3_array.push(chart_o3);
          chart_dust_array.push(chart_dust);
}
  setInterval("chart_ajax()",1000);

var myChart7 = echarts.init(document.getElementById('main1'));

 option7 = {
    title: {
    },
    tooltip: {
        trigger: 'axis'
    },
    xAxis:  {
        type: 'category',
        boundaryGap: false,
        data: ['七小时前','六小时前','五小时前','四小时前','三小时前','二小时前','一小时前']
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value} °C'
        }
    },
    series: [
        {
            name:'cp',
            type:'line',
            data:data.co,
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        },
        {
            name:'o3',
            type:'line',
            data:data.o3,
            markPoint: {
                data: [
                    {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'},
                    [{
                        symbol: 'none',
                        x: '90%',
                        yAxis: 'max'
                    }, {
                        symbol: 'circle',
                        label: {
                            normal: {
                                position: 'start',
                                formatter: '最大值'
                            }
                        },
                        type: 'max',
                        name: '最高点'
                    }]
                ]
            }
        },
        {
            name:'dust',
            type:'line',
            data:data.dust,
            markPoint: {
                data: [
                    {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'},
                    [{
                        symbol: 'none',
                        x: '90%',
                        yAxis: 'max'
                    }, {
                        symbol: 'circle',
                        label: {
                            normal: {
                                position: 'start',
                                formatter: '最大值'
                            }
                        },
                        type: 'max',
                        name: '最高点'
                    }]
                ]
            }
        }
    ]
};
myChart7.setOption(option7);




/* Realtime chart1 starts */

$(function () {
    // we use an inline data source in the example, usually data would
    // be fetched from a server
    var data = [], totalPoints = 6;
    function chart_plot_qua() {
        if (data.length > 0)
            data = chart_qua_array.slice(1);

        // do a random walk
        while (data.length < totalPoints) {
            data.unshift(0);
        }

        // zip the generated y values with the x values
        var res = [];
        for (var i = 0; i < data.length; ++i)
            res.push([i, data[i]])
                                return res;
                            }

    // setup control widget
    var updateInterval = 800;
    $("#updateInterval").val(updateInterval).change(function () {
        var v = $(this).val();
        if (v && !isNaN(+v)) {
            updateInterval = +v;
            if (updateInterval < 1)
                updateInterval = 1;
            if (updateInterval > 2000)
                updateInterval = 2000;
            $(this).val("" + updateInterval);
        }
    });

    // setup plot
    var options = {
        series: { shadowSize: 0 }, // drawing is faster without shadows
        lines: {fill: true},
        grid: {borderWidth:0 },
        yaxis: { min: 0, max: 20 },
        colors: ["#ff2424"]
    };
    var plot = $.plot($("#live-chart"), [ chart_plot_qua() ], options);

    function update_1() {
        plot.setData([ chart_plot_qua() ]);
        // since the axes don't change, we don't need to call plot.setupGrid()
        plot.draw();
        
        setTimeout(update_1, updateInterval);
    }

    update_1();
});

/* Realtime charts1 ends */


/* Realtime chart2 starts */

$(function () {
    // we use an inline data source in the example, usually data would
    // be fetched from a server
    var data_co = [], data_o3=[],data_dust=[],totalPoints = 6;
    function chart_plot_co() {
        if (data_co.length > 0)
            data_co = chart_co_array.slice(1);
        while (data_co.length < totalPoints) {
            data_co.unshift(0);
        }
        var res_co = [];
        for (var i = 0; i < data_co.length; ++i)
            res_co.push([i, data_co[i]])
        return res_co;
    }
    function chart_plot_o3() {
        if (data_o3.length > 0)
            data_o3 = chart_o3_array.slice(1);
        while (data_o3.length < totalPoints) {
            data_o3.unshift(0);
        }
        var res_o3 = [];
        for (var i = 0; i < data_o3.length; ++i)
            res_o3.push([i, data_o3[i]])
        return res_o3;
    }
    function chart_plot_dust() {
        if (data_dust.length > 0)
            data_dust = chart_dust_array.slice(1);
        while (data_dust.length < totalPoints) {
            data_dust.unshift(0);
        }
        var res_dust = [];
        for (var i = 0; i < data_dust.length; ++i)
            res_dust.push([i, data_dust[i]])
        return res_dust;
    }


    // setup control widget
    var updateInterval = 800;
    $("#updateInterval-2").val(updateInterval).change(function () {
        var v = $(this).val();
        if (v && !isNaN(+v)) {
            updateInterval = +v;
            if (updateInterval < 1)
                updateInterval = 1;
            if (updateInterval > 2000)
                updateInterval = 2000;
            $(this).val("" + updateInterval);
        }
    });

    // setup plot
    var options_2 = {
        series: { shadowSize: 0 }, // drawing is faster without shadows
        lines: {fill: true},
        grid: {borderWidth:0 },
        yaxis: { min: 0, max: 20 },
        colors: ["#ff2424"]
    };
    var dataset_2=[{ label: "co", data:  chart_plot_co(), color: "#000000" },
                 { label: "o3", data:  chart_plot_o3() , color: "#FF00FF"},
                 { label: "dust", data:  chart_plot_dust() , color: "#FFFF00"}];
    var plot_2 = $.plot($("#live-chart-2"), dataset_2, options_2);

    function update_2() {
        dataset_2=[{ label: "co", data:  chart_plot_co(), color: "#000000" },
                 { label: "o3", data:  chart_plot_o3() , color: "#FF00FF"},
                 { label: "dust", data:  chart_plot_dust() , color: "#FFFF00"}];
        // since the axes don't change, we don't need to call plot.setupGrid()
        plot_2.setData(dataset_2);
        plot_2.draw();
        
        setTimeout(update_2, updateInterval);
    }

    update_2();
});

/* Realtime charts2 ends */


</script>

</body>
</html>